<template>
    <div class="dialog">
      <el-dialog :title="dialogTitle" v-model="visible" :width="width" @closed="close">
        <div class="dialog-content">
          <slot name="content"></slot>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submit">确 认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    </template>
    <script lang='ts' setup>
    import { ref,toRefs} from 'vue';
      
    const emit = defineEmits<{
      (e: 'submit', data: any): void
    }>()
    const props = defineProps<{
      dialogTitle:string,
      width:string
    }>()
    const {dialogTitle,width} = toRefs(props)
    let visible = ref(false)
    
    // 打开
    const show = (data?: any) => {
      visible.value = true;
    }
     // 打开
     const cancel = (data?: any) => {
      visible.value = false;
    }
    // 提交
    const submit = () => {
      emit('submit', '数据')
      visible.value = false;
    }
    // 关闭
    const close = () => {
      visible.value = false;
    };
    
    defineExpose({
      show,
      cancel
    })
    
    </script>
    
    <style lang='scss' scoped>
  
    .dialog-footer{
      text-align: center;
    }
  // ::v-deep .el-dialog__headerbtn .el-dialog__close{
  //   font-size: 32px !important;
  //   font-weight: 600;
  //   color:black;
  // }
    </style>
    